<template>
  <span ref="round">
    {{ value }}
  </span>
</template>
<script setup>
import { ref, nextTick, reactive, watch } from 'vue'
import anime from 'animejs'
const round = ref()
const props = defineProps({
  value: Number
})
watch(
  props,
  () => {
    rounds()
  },
  { immediate: true }
)

const weishu = (value) => {
  var x = String(value).indexOf('.') + 1 //得到小数点的位置
  var y = String(value).length - x //小数点的位数
  if (x == 0) {
    return 1
  } else if (y > 0) {
    return y
  }
}
function rounds() {
  setTimeout(() => {
    nextTick(() => {
      if (props.value) {
        anime({
          targets: round._rawValue,
          innerHTML: [0, props.value],
          easing: 'linear',
          duration: 500,
          round: Math.pow(10, weishu(props.value)) // Will round the animated value to 1 decimal
        })
      } else {
        rounds()
      }
    })
  }, 500)
}
</script>

<style>
</style>